<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>发送邮件</title>
    <style>
        html, body {
            width: 100%;
            overflow: hidden;
            height: 100%;
            margin: 0;
        }

        .button-box {
            margin-bottom: 30px;
            width: 100%;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .button {
            margin-top: 30px;
            width: 85%;
            height: 40px;
            border: none;
            color: white;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px
        }

        .button2 {
            background-color: #409eff;
            border-color: #409eff;
        } /* Blue */

        .input {
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: none;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            width: 100%;
        }

        .box {
            justify-content: center;
            align-items: center;
            padding: 5px 10%;
        }
    </style>
</head>
<body>

<div class="box" style="margin-top: 20px">
    senderServerIp  邮箱服务器地址
    <input id="senderServerIp" value="smtp.qq.com" class="input">
</div>
<div class="box">
    fromMailAddress 发件人邮箱
    <input id="fromMailAddress" value="954711908@qq.com" class="input">
</div>
<div class="box">
    toMailAddress 收件人邮箱
    <input id="toMailAddress" value="954711908@qq.com" class="input">
</div>
<div class="box">
    subjectInfo 邮件标题
    <input id="subjectInfo" value="这是一条测试邮件" class="input">
</div>
<div class="box">
    bodyInfo 邮件内容
    <input id="bodyInfo" value="如果你觉得作者写的不错,给作者个赞" class="input">
</div>
<div class="box">
    mailUsername 发件人用户名
    <input id="mailUsername" value="954711908@qq.com" class="input">
</div>
<div class="box">
    mailPassword 邮箱密码
    <input id="mailPassword" value="qpstwelgjxaibbbh" class="input">
</div>
<div class="box">
    enclosure 附件路径(服务器路径)
    <input id="enclosure" value="" class="input">
</div>
<!-- 下载按钮 -->
<div class="button-box">
    <button class="button button2" onclick="send();">发送邮件</button>
</div>

</body>

<script>

    // 发送邮件
    function send () {
        let senderServerIp = document.getElementById('senderServerIp').value
        let fromMailAddress = document.getElementById('fromMailAddress').value
        let toMailAddress = document.getElementById('toMailAddress').value
        let subjectInfo = document.getElementById('subjectInfo').value
        let bodyInfo = document.getElementById('bodyInfo').value
        let mailUsername = document.getElementById('mailUsername').value
        let mailPassword = document.getElementById('mailPassword').value
        let enclosure = document.getElementById('enclosure').value

        get(senderServerIp,fromMailAddress,toMailAddress,subjectInfo,bodyInfo,mailUsername,mailPassword,enclosure);
    }

    // 创建并发送原生AJAX请求
    function get(senderServerIp,fromMailAddress,toMailAddress,subjectInfo,bodyInfo,mailUsername,mailPassword,enclosure){
        //1.创建AJAX对象
        var ajax = new XMLHttpRequest();

        //4.给AJAX设置事件(这里最多感知4[1-4]个状态)
        ajax.onreadystatechange = function(){
            //5.获取响应
            //responseText		以字符串的形式接收服务器返回的信息
            //console.log(ajax.readyState);
            if(ajax.readyState == 4 && ajax.status == 200){
                var msg = ajax.responseText;

                if(msg == 1) {
                    alert(`状态码：${msg},邮件发送成功`)
                    console.log(`状态码：${msg},邮件发送成功`)
                } else {
                    alert(`状态码：${msg},邮件发送失败`)
                    console.log(`状态码：${msg},邮件发送失败`)
                };
            }
        }

        //2.创建http请求,并设置请求地址
        ajax.open('get',`./sendMail/sendMail.ashx?senderServerIp=${senderServerIp}&fromMailAddress=${fromMailAddress}&toMailAddress=${toMailAddress}&subjectInfo=${subjectInfo}&bodyInfo=${bodyInfo}&mailUsername=${mailUsername}&mailPassword=${mailPassword}&enclosure=`);

        //3.发送请求(get--null    post--数据)
        ajax.send(null);
    }
</script>
</html>
